// 发送请求
async function getStudent() {
    pxmu.loading('正在加载中..');
    try {
        let res = await axios({
            url: '/dashboard',
        })
        // console.log(res.data.data);
        return res.data.data
    } catch (err) {
        console.log(err.response);
    }
}
// 渲染四个版块
function Renderboards() {
    getStudent().then(res => {
        pxmu.closeload(100);
        let data = res.overview
        // 渲染数据
        document.querySelector('.salary').innerHTML = data.salary
        document.querySelector('.student_count').innerHTML = data.student_count
        document.querySelector('.age').innerHTML = data.age
        document.querySelector('.group_count').innerHTML = data.group_count
    })
}
// 渲染薪资走势
function trend() {
    let line = echarts.init(document.querySelector('#line'))
    getStudent().then(res => {
        let year = res.year
        // console.log(year);
        option = {
            title: {
                text: '2024年全科薪资走向',
                left: '3%',
                top: '3%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: year.map(ele => ele.month)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    symbolSize: 10,
                    data: year.map(ele => ele.salary),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 5,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#8DA3E5' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#8DA3E5' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };

        line.setOption(option)
    })
}
// 渲染薪资分布
function distribution() {
    let salary = echarts.init(document.querySelector('#salary'))
    getStudent().then(res => {
        let salaryData = res.salaryData
        // console.log(salaryData);
        option = {
            title: {
                text: '班级薪资分布',
                left: '3%',
                top: '3%'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 50,
                    itemStyle: {
                        borderRadius: 15,
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: salaryData.map(ele => {
                        return {
                            value: ele.g_count + ele.b_count,
                            name: ele.label
                        }
                    })
                }
            ],
            color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
        };

        salary.setOption(option)
    })
}
// 渲染班级每组薪资
function class_group() {
    let groupData
    let option
    let lines = echarts.init(document.querySelector('#lines'))
    getStudent().then(res => {
        groupData = res.groupData
        // console.log(groupData);
        option = {
            // 显示提示框
            tooltip: {},
            // 绘图网络
            grid: {
                left: 70,
                top: 30,
                right: 30,
                bottom: 50
            },
            xAxis: {
                type: 'category',
                // 默认渲染第一组的数据
                data: groupData[1].map(ele => ele.name),
                // 线的类型，颜色，文字的颜色
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        type: 'dashed'
                    }
                },
                // 坐标轴刻度标签的相关设置
                axisLabel: {
                    // 刻度标签文字的颜色
                    color: '#999'
                }
            },
            yAxis: {
                type: 'value',
                // 分割线的类型
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            // series中设置多个图形，就会渲染多个图形
            series: [
                {
                    name: '期望薪资',
                    data: groupData[1].map(ele => ele.hope_salary),
                    type: 'bar',
                    // 柱状图的样式
                    itemStyle: {
                        // 柱状图的颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#34D39A' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                {
                    name: '实际薪资',
                    data: groupData[1].map(ele => ele.salary),
                    type: 'bar',
                    // 柱状图的样式
                    itemStyle: {
                        // 柱状图的颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#499FEE' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        }
        lines.setOption(option)
    })
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        e.preventDefault()
        // 点击高亮
        if (e.target.classList.contains('btn')) {
            btns.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
        }
        let index = e.target.innerHTML
        let data = groupData[index]
        // console.log(data);
        // 重新赋值
        option.xAxis.data = data.map(ele => ele.name)
        option.series[0].data = data.map(ele => ele.hope_salary)
        option.series[1].data = data.map(ele => ele.salary)
        lines.setOption(option)
    })
}
// 男女薪资分布
function Gender_distribution() {
    let gender = echarts.init(document.querySelector('#gender'))
    getStudent().then(res => {
        let salaryData = res.salaryData
        // console.log(salaryData);

        option = {
            title: [
                {
                    text: '男女薪资分布',
                    left: '15%',
                    top: '10%'
                },
                {
                    text: '男生',
                    left: '45%',
                    bottom: '45%',
                    textStyle: {
                        fontSize: '12'
                    }
                },
                {
                    text: '女生',
                    left: '45%',
                    bottom: '10%',
                    textStyle: {
                        fontSize: '12'
                    }
                }
            ],
            tooltip: {
                trigger: 'item'
            },
            color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
            series: [
                {
                    bottom: '30%',
                    left: '32%',
                    width: '35%',
                    name: '男生',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    type: 'pie',
                    data: salaryData.map(ele => {
                        return { value: ele.b_count, name: ele.label }
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    top: '40%',
                    left: '32%',
                    width: '35%',
                    name: '女生',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    type: 'pie',
                    data: salaryData.map(ele => {
                        return { value: ele.g_count, name: ele.label }
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        gender.setOption(option)
    })


}
// 籍贯分布
function native_place() {
    let map = echarts.init(document.querySelector('#map'))
    getStudent().then(res => {
        let provinceData = res.provinceData
        // console.log(provinceData);
        const dataList = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 0 },
            { name: '天津', value: 0 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江西', value: 0 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '陕西', value: 0 },
            { name: '吉林', value: 0 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 0 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 },
        ]
        // 筛选数据
        dataList.forEach(item => {
            const res = provinceData.find(ele => {
                return ele.name.includes(item.name)
            })
            // 数据赋值
            if (res !== undefined) {
                item.value = res.value
            }
        })

        const option = {
            title: {
                text: '学员籍贯分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16,
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} 位学员',
                borderColor: 'transparent',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff',
                },
            },
            visualMap: {
                min: 0,
                max: 6,
                left: 'left',
                bottom: '20',
                text: ['6', '0'],
                inRange: {
                    color: ['#ffffff', '#0075F0'],
                },
                show: true,
                left: 40,
            },
            geo: {
                map: 'china',
                roam: false,
                zoom: 1.0,
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)',
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)',
                        color: '#e0ffff',
                    },
                    emphasis: {
                        areaColor: '#48D1CC',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
            series: [
                {
                    name: '籍贯分布',
                    type: 'map',
                    geoIndex: 0,
                    data: dataList,
                },
            ],
        }
        map.setOption(option)

    })
}
trend()
Renderboards()
distribution()
setUserName()
class_group()
Gender_distribution()
native_place()
Log_out()